<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
*{
	margin:0px;
	padding:0px;
}
body{
	width: 100%;
	height: 100%;
}
.left{
	float:left;
	width: 240px;
	height: 100vh;
	overflow:hidden;
	background: #F60;
	color:#FFF;
	position: absolute;
	top:0px;
	left:0px;
}
.right{
	float:left;
	position:relative;
	z-index:1;
	width: 100%;
	height: 100vh;
	background: #DAF;
	transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	box-shadow:0px 20px 20px rgba(0, 0, 0, 0.6);
}
.transform{
	transform:translate3d(240px,0,0);
	transition: all 0.4s;
	-moz-transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
}
</style>
</head>
<body>
<div class="left">
	123454y
</div>
<div class="right" id="right">
	asdsadasd
</div>	
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
	$('.right').click(function(event) {
		$(this).toggleClass('transform')
	});
})
</script>
</html>